<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>排行榜</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" type="text/css" href="/Public/css/mui.min.css" />
    <style>
        html,
        body {
            background-color: #efeff4;
        }
        .mui-bar~.mui-content .mui-fullscreen {
            top: 44px;
            height: auto;
        }
        .mui-pull-top-tips {
            position: absolute;
            top: -20px;
            left: 50%;
            margin-left: -25px;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            z-index: 1;
        }
        .mui-bar~.mui-pull-top-tips {
            top: 24px;
        }
        .mui-pull-top-wrapper {
            width: 42px;
            height: 42px;
            display: block;
            text-align: center;
            background-color: #efeff4;
            border: 1px solid #ddd;
            border-radius: 25px;
            background-clip: padding-box;
            box-shadow: 0 4px 10px #bbb;
            overflow: hidden;
        }
        .mui-pull-top-tips.mui-transitioning {
            -webkit-transition-duration: 200ms;
            transition-duration: 200ms;
        }
        .mui-pull-top-tips .mui-pull-loading {
            /*-webkit-backface-visibility: hidden;
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;*/

            margin: 0;
        }
        .mui-pull-top-wrapper .mui-icon,
        .mui-pull-top-wrapper .mui-spinner {
            margin-top: 7px;
        }
        .mui-pull-top-wrapper .mui-icon.mui-reverse {
            /*-webkit-transform: rotate(180deg) translateZ(0);*/
        }
        .mui-pull-bottom-tips {
            text-align: center;
            background-color: #efeff4;
            font-size: 15px;
            line-height: 40px;
            color: #777;
        }
        .mui-pull-top-canvas {
            overflow: hidden;
            background-color: #fafafa;
            border-radius: 40px;
            box-shadow: 0 4px 10px #bbb;
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }
        .mui-pull-top-canvas canvas {
            width: 40px;
        }
        .mui-slider-indicator.mui-segmented-control {
            background-color: #efeff4;
        }
        .mui-segmented-control.mui-scroll-wrapper .mui-scroll {
            width: 100%;
            display: -webkit-flex;
            display: flex;
        }
        .mui-segmented-control.mui-scroll-wrapper .mui-scroll .mui-control-item {
            -webkit-flex:1;
            flex:1;
        }
        .mui-table-view .mui-media-object {
            max-width: 42px;
            height: 42px;
            line-height: 42px;
        }

        .body-right-money {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #e46c6c;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav" style="background-color: #36373C;color: #fff">
    <a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
    <h1 id="title" class="mui-title" style="color: #fff;">排行榜</h1>
</header>
<div class="mui-content">
    <div id="slider" class="mui-slider mui-fullscreen">
        <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
                <a class="mui-control-item mui-active" href="#item1mobile">
                    日榜
                </a>
                <a class="mui-control-item" href="#item2mobile">
                    周榜
                </a>
                <a class="mui-control-item" href="#item3mobile">
                    月榜
                </a>
            </div>
        </div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div id="scroll1" class="mui-scroll-wrapper">
                    <div class="mui-scroll" data-tab = "1">
                        <ul class="mui-table-view">
                            <script id="list1" type="text/html">
                                {{#  layui.each(d, function(index, item){ }}
                                <li class="mui-table-view-cell mui-media">
                                    <img class="mui-media-object mui-pull-left"  src="{{item.headimg}}" onerror="this.src='/Public/images/head.png'">
                                    <div class="mui-media-body">
                                        <span>{{item.register_name}}</span>
                                        <p>
                                            <span>{{item.tel}}</span>
                                        </p>
                                        <div class="mui-pull-right body-right-money">￥{{item.sum}}</div>
                                    </div>
                                </li>
                                {{#  }); }}
                            </script>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll" data-tab = "2">
                        <ul class="mui-table-view">
                            <script id="list2" type="text/html">
                                {{#  layui.each(d, function(index, item){ }}
                                <li class="mui-table-view-cell mui-media">
                                    <img class="mui-media-object mui-pull-left"  src="{{item.headimg}}" onerror="this.src='/Public/images/head.png'">
                                    <div class="mui-media-body">
                                        <span>{{item.register_name}}</span>
                                        <p>
                                            <span>{{item.tel}}</span>
                                        </p>
                                        <div class="mui-pull-right body-right-money">￥{{item.sum}}</div>
                                    </div>
                                </li>
                                {{#  }); }}
                            </script>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="item3mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll" data-tab = "3">
                        <ul class="mui-table-view">
                            <script id="list3" type="text/html">
                                {{#  layui.each(d, function(index, item){ }}
                                <li class="mui-table-view-cell mui-media">
                                    <img class="mui-media-object mui-pull-left" src="{{item.headimg}}" onerror="this.src='/Public/images/head.png'">
                                    <div class="mui-media-body">
                                        <span>{{item.register_name}}</span>
                                        <p>
                                            <span>{{item.tel}}</span>
                                        </p>
                                        <div class="mui-pull-right body-right-money">￥{{item.sum}}</div>
                                    </div>
                                </li>
                                {{#  }); }}
                            </script>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/Public/layui/layui.js"></script>
<script src="/Public/js/mui.min.js"></script>
<script src="/Public/js/jquery.min.js"></script>
<script src="/Public/js/mui.pullToRefresh.js"></script>
<script src="/Public/js/mui.pullToRefresh.material.js"></script>
<script>
    mui.init();
    layui.use('laytpl', function () {
        var laytpl = layui.laytpl;
        (function(d) {
            var p1 = 1;  //分页参数
            var p2 = 1;  //分页参数
            var p3 = 1;  //分页参数
            //阻尼系数
            var deceleration = mui.os.ios?0.003:0.0009;
            d('.mui-scroll-wrapper').scroll({
                bounce: true,
                indicators: false, //是否显示滚动条
                deceleration:deceleration
            });
            d.ready(function() {
                //循环初始化所有下拉刷新，上拉加载。
                d.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
                    d(pullRefreshEl).pullToRefresh({
                        up: {
                            auto: true,
                            contentnomore:'没有更多数据了',
                            callback: function() {
                                var self = this;
                                var type = $(self.element).data('tab');
                                var p;
                                switch (type) {
                                    case 1:
                                        getData({p:p1,type:1},function (res) {
                                            p1++;
                                            renderData(list1, self, res);
                                        });
                                        break;
                                    case 2:
                                        getData({p:p2,type:2},function (res) {
                                            p2++;
                                            renderData(list2, self, res);
                                        });
                                        break;
                                    case 3:
                                        getData({p:p3,type:3},function (res) {
                                            p3++;
                                            renderData(list3, self, res);
                                        });
                                        break;
                                }
                                getData(type, p);
                            }
                        }
                    });
                });

                //id为dom的id self为当前刷新对象 res为返回的数据
                function renderData(id, self, res) {
                    if (res.data.length == 0) {
                        self.endPullUpToRefresh(true);
                        return;
                    }
                    var getTpl = id.innerHTML;
                    var ul = self.element.querySelector('.mui-table-view');
                    laytpl(getTpl).render(res.data, function(html){
                        $(ul).append(html);
                    });
                    self.endPullUpToRefresh();
                }

                function getData(data,success) {
                    $.ajax({
                        type: "POST",
                        url: '/index.php/Home/Sort/getSort',
                        dataType: 'json',
                        timeout: 10000,
                        data:data ,
                        success: success
                    });
                }
            });
        })(mui);
    })

</script>
</body>

</html>